A Five Minute Guide to HTML and MTX

Introduction

What is HTML?

HTML stands for Hypertext Markup Language. HTML is the page layout standard used by the World Wide Web. The current version of HTML is 2.0 but extensions such as tables and floating graphics are also in use. Use a web browser such as Netscape Navigator, NCSA Mosaic, or Lynx to view HTML files.

What is MTX?

MTX is a simplified means for creating HTML documents. The MTX format is easy to learn and use. You can create MTX formatted files with any word processor or text editor. The MTX Tool converts these files into HTML pages in a matter of seconds.

How to use this guide?

This guide presents the basics of both HTML and MTX in a simple tutorial format. Each section (delimited by double horizontal lines) introduces a basic HTML concept followed by the equivalent MTX syntax. You may wish to copy and paste the examples into your own files and experiment with the concepts being presented. By the end of this exercise you should be able to create your own Web pages using either plain HTML or MTX.

To Begin...

HTML files are nothing other than plain text files containing a series of page formatting tags. Tags consist of a less than sign (<), the tag name, and a greater than sign (>). "<TITLE>" is an example of a tag. Most tags have a complementary closing tag with an added slash character (/). "</TITLE>" is an example of a closing tag. Pairs of tags are used to enclose page elements such as the title of the page. HTML files have two major parts, the head and body, identified by the "<HEAD>" and <BODY> tags respecitively. The head contains the title and other information about the page. A properly formed HTML file also begins with the "<HTML>" tag and ends with "</HTML>". Here is an example:

    <HTML>
    <HEAD>
    <TITLE>Basic HTML Page</TITLE>
    </HEAD>
    <BODY>

      Empty for now...

    </BODY>
    </HTML>

MTX takes care of all of these details for you. One line of MTX is all you need to create the basic HTML file shown above:

    %TITLE Basic HTML Page

      Empty for now...

Adding Some Content

Now let's add some text to the body of the HTML document.

    <HTML>
    <HEAD>
    <TITLE>Basic HTML Page</TITLE>
    </HEAD>
    <BODY>
    This is a short paragraph to demonstrate how HTML handles text.
    The most important thing to note is that extra space        ,
    tab, and return characters are ignored by HTML.

    The blank line above will become a single space when displayed.
    </BODY>
    </HTML>

Here's the next difference between HTML and MTX, in MTX blank lines are used to delimit paragraphs. Extra spaces and tabs are ignored just as with HTML.

    %TITLE Basic HTML Page

    This is a short paragraph to demonstrate how MTX handles text.
    Blank lines are used to delimit paragraphs.

    The blank line above will force a paragraph break before this line.

Paragraphs

HTML treats all text as one continuous paragraph until it comes to a paragraph "<P>" tag. By adding a "<P>" we divide the body of this page into two paragraphs.

    <HTML>
    <HEAD>
    <TITLE>Basic HTML Page</TITLE>
    </HEAD>
    <BODY>
    This is a short paragraph to demonstrate how HTML handles text.
    The most important thing to note is that extra space        ,
    tab, and return characters are ignored by HTML.<P>

    The blank line above will become a single space when displayed.
    </BODY>
    </HTML>

Our paragraphs are already defined...

    %TITLE Basic HTML Page

    This is a short paragraph to demonstrate how MTX handles text.
    Blank lines are used to delimit paragraphs.

    The blank line above will force a paragraph break before this line.

Headings and Sections

Heading tags can be used to give structure to a page. Headings come in different "sizes" from 1 to 6. It is good practice to use the the top level heading "<H1>" to repeat the page title at the beginning of the body. Major sections should use "<H2>" headings, subsections "<H3>" headings, and so on.

    <HTML>
    <HEAD>
    <TITLE>Basic HTML Page</TITLE>
    </HEAD>
    <BODY>
    <H1>Basic HTML Page</H1>
    This is a short paragraph to demonstrate how HTML handles text.
    The most important thing to note is that extra space        ,
    tab, and return characters are ignored by HTML.<P>

    The blank line above will become a single space when displayed.

    <H2>Second Section</H2>

      Empty for now...

    <H2>Third Section</H2>

      Empty for now...

    </BODY>
    </HTML>

MTX automatically supplies the top level heading for the page from the "%TITLE" tag. Section headings are defined by adding a pound sign (#) to the heading text. As an added benefit, MTX will automatically create a table of contents for the page based on the section headings.

    %TITLE Basic HTML Page

    This is a short paragraph to demonstrate how MTX handles text.
    Blank lines are used to delimit paragraphs.

    The blank line above will force a paragraph break before this line.

    #Second Section

      Empty for now...

    #Third Section

      Empty for now...

Adding Pictures

HTML documents can include pictures stored as separate files. These pictures are inserted in the text by the image "<IMG>" tag. This tag is unusual in that there is no closing "</IMG>" tag. The name of the picture file is included as part of the tag itself, in this case "picture.gif".

    <HTML>
    <HEAD>
    <TITLE>Basic HTML Page</TITLE>
    </HEAD>
    <BODY>
    <H1>Basic HTML Page</H1>
    This is a short paragraph to demonstrate how HTML handles text.
    The most important thing to note is that extra space        ,
    tab, and return characters are ignored by HTML.<P>

    The blank line above will become a single space when displayed.

    <H2>Second Section</H2>

    <IMG SRC="picture.gif">

    <H2>Third Section</H2>

      Empty for now...

    </BODY>
    </HTML>

The MTX approach to pictures is a bit simpler. The "{=" and "=}" tags are used to surround the name of the picture. Since the picture file is already known to be a GIF, the ".gif" extension is omitted.

    %TITLE Basic HTML Page

    This is a short paragraph to demonstrate how MTX handles text.
    Blank lines are used to delimit paragraphs.

    The blank line above will force a paragraph break before this line.

    #Second Section

    {=picture=}

    #Third Section

      Empty for now...

Hypertext Links

Now we are ready to add hypertext links to our file. The "<A>" anchor tags are used to enclose text (or images) to make "hot spots" in the document. Hot spots are indicated by color or other highlighting. Additional information about the link must appear just after the opening "<A>" tag. This usually takes the form of "HREF=URL" where URL is an address (in quotes) for the hypertext jump. The first example shows a hypertext link to a local file "example1.html" in the same directory as this one. The second example shows the use of a complete URL for both the hot text and link address.

    <HTML>
    <HEAD>
    <TITLE>Basic HTML Page</TITLE>
    </HEAD>
    <BODY>
    <H1>Basic HTML Page</H1>
    This is a short paragraph to demonstrate how HTML handles text.
    The most important thing to note is that extra space        ,
    tab, and return characters are ignored by HTML.<P>

    The blank line above will become a single space when displayed.

    <H2>Second Section</H2>

    <IMG SRC="picture.gif">

    <H2>Third Section</H2>

    This is a <A HREF="example1.html">link</A> to an example file.<P>

    The MTX home page is located at: <A HREF="http://www.med.ufl.edu/medinfo/mtx/">http://www.med.ufl.edu/medinfo/mtx/</A>

    </BODY>
    </HTML>

MTX fixes several flaws with HTML "anchors." First, the syntax is simpler and easier to read--hypertext links are delimited by "{#" and "#}" tags. Second, the destination address comes after the link text. This is a more natural way to think about hypertext and adds to readability. Finally, redundant information is removed when using URLs or email addresses as links. Notice the brevity of the second hypertext example shown below. The "##" tells MTX to repeat the link text as the destination address.

    %TITLE Basic HTML Page

    This is a short paragraph to demonstrate how MTX handles text.
    Blank lines are used to delimit paragraphs.

    The blank line above will force a paragraph break before this line.

    #Second Section

    {=picture=}

    #Third Section

    This is a {#link#example1.html#} to an example file.

    The MTX home page is located at: {#http://www.med.ufl.edu/medinfo/mtx/##}

Conclusion

During this exercise we have created two parallel example files--one using plain HTML and the other using MTX to generate HTML. Notice that the MTX example contains an interactive table of contents. Creating a table of contents in plain HTML is left as an exercise for the reader.